<!-- 右侧标题块 -->
<template>
  <div
    class="main-title dis-flex main-bg drag"
    :style="{
      height: height + 'px',
      lineHeight: height + 'px',
      borderBottomWidth: showBorder ? '1px' : '0'
    }"
  >
    <span v-if="title">{{ props.title }}</span>
    <div class="btn-box">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  // 标题名称
  title: {
    type: String,
    default: '我是个好标题'
  },
  // 标题栏高度
  height: {
    type: Number,
    default: 64
  },
  // 是否显示底部边框
  showBorder: {
    type: Boolean,
    default: true
  }
})

</script>

<style lang="scss" scoped>
.main-title {
  //border-bottom: 1px solid #d5d5d5;
  border-bottom-style: solid;
  border-bottom-color: #d5d5d5;
  justify-content: space-between;
  padding-left: 12px;
}
.btn-box {
  text-align: right;
  margin-top: 16px;
  overflow: hidden;
  padding-right: 10px;
}

</style>
